<template>
  <view class="content">
    <view class="title mt50">② 收付款账号</view>
    <u--form :model="formData" :rules="rules" ref="uForm" labelWidth="200">
      <view class="formbox">
        <u-form-item label="账户名 *" prop="accountOpener" :borderBottom="true">
          <u--input border="none" clearable v-model="formData.accountOpener" />
        </u-form-item>
        <u-form-item label="银行卡名称 *" prop="accountName" :borderBottom="true">
          <u--input border="none" clearable v-model="formData.accountName" />
        </u-form-item>

        <u-form-item label="银行卡号 *" prop="account" :borderBottom="true">
          <u--input border="none" clearable v-model="formData.account" />
        </u-form-item>
      </view>
    </u--form>
    <!-- 吸底工具栏 -->
    <view
      class="toolbar-height"
      :style="{ paddingBottom: safeAreaInsets?.bottom + 30 + 'px' }"
    ></view>
    <view
      class="toolbar"
      :style="{ paddingBottom: safeAreaInsets?.bottom + 30 + 'px' }"
    >
      <view class="button-grounp">
        <view @tap="submit" class="button payment-button"> 提交 </view>
      </view>
    </view>
  </view>
</template>

<script lang="ts" setup>
import { onLoad } from "@dcloudio/uni-app";
import { ref, reactive } from "vue";
// 获取屏幕边界到安全区域距离
const { safeAreaInsets } = uni.getSystemInfoSync();
const formData = reactive({
  accountName: "",
});
// 页面加载
onLoad(() => {
  formData.id = uni.getStorageSync("userId");
});

const rules = {
    accountOpener: {
    type: "string",
    required: true,
    message: "请输入",
    trigger: ["blur"],
  },
  accountName: {
    type: "string",
    required: true,
    message: "请输入",
    trigger: ["blur"],
  },
  account: {
    type: "string",
    required: true,
    message: "请输入",
    trigger: ["blur"],
  },
};
const submit = () => {
    let param=JSON.parse(JSON.stringify(formData))

};
</script>

<style lang="scss" scoped>
    .content {
  padding: 26rpx 32rpx;
  background: #FFFFFF;
    }
</style>
